<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>param传参</title>
  </head>
  <body>
    <style>
      .style1 {
        background: #267400;
        color: white;
        padding: 15px;
        margin: 15px 0;
      }
      .main {
        padding: 10px;
      }
    </style>

    <div id="app">
      <div>
        <div class="style1">
          <router-view></router-view>
        </div>
      </div>

      <div class="main">
        <router-view name="main"></router-view>
      </div>

      <template id="sidebar">
        <div>
          <ul>
            <router-link></router-link>
          </ul>
        </div>
      </template>
    </div>

    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--引入Vue Router-->
    <script src="https://unpkg.com/vue-router@next"></script>
    <script>
      // 1.定义路由跳转的模板
      const header = {
        template: '<div class="header">用户登录窗口</div>'
      }
      const sidebar = {
        template: '#sidebar',
        data: function () {
          return {
            menu: [
              {
                displayName: 'Form',
                routeName: 'form'
              },
              {
                displayName: 'Info',
                routeName: 'info'
              }
            ]
          }
        }
      }
      const main = {
        template: '#main'
      }
      const form = {
        template: '#form',
        data: function() {
          return {
            email: '',
            password: ''
          }
        },
        methods: {
          submit: function() {
            // 方式1
            this.$router.push({
              name: 'info',
              params: {
                email: this.email,
                password: this.password
              }
            })
          }
        }
      }
      const info = {
        template: '#info'
      }

      // 2.定义路由信息
      const routes = [
        {
          path: '/',
          components: {
            default: header,
            sidebar: sidebar,
            main: main
          },
          children: [
            {
              path: '',
              redirect: 'form'
            },
            {
              path: 'form',
              name: 'form',
              component: form
            },
            {
              path: 'info/:email/:password',
              name: 'info',
              component: info
            }
          ]
        }
      ]
      
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes // 简写，相当于routes: routes
      })

      const vm =  Vue.createApp({
        data() {
          return {}
        },
        methods: {}
      })

      vm.use(router)
      vm.mount('#app')
    </script>
  </body>
</html>
